File System Access API
まだまだといった感じだが、chromeなら基本的な操作ができる
たぶん昔はnative file system apiって名前だったっぽい
解説記事
簡易的なテキストエディタ
参考になる
利用例
bookmarkletからページ上の画像をすべて保存する
なるほど?
Traditionally saving a file from the browser to your machine is hacky, you create an anchor that links to the image, add a 'download' attribute (optionally with the name of the file), and then simulate a mouse click on it.
やったことなかったから知らんかったが、ファイルのダウンロードってdom作ってクリック呼び出してやってたのか
directoryhandle握れば複数の画像を楽に保存できるわけか
型定義からapiを把握する
showなんとかで開いたり保存したりできる
なんとかhandleから読み書きできる
$ npm install --save @types/wicg-file-system-access
型定義見たほうがわかりやすいかも
code:ts
function showOpenFilePicker(
options?: OpenFilePickerOptions & { multiple?: false },
function showOpenFilePicker(options?: OpenFilePickerOptions): Promise<FileSystemFileHandle[]>;
function showSaveFilePicker(options?: SaveFilePickerOptions): Promise<FileSystemFileHandle>;
function showDirectoryPicker(options?: DirectoryPickerOptions): Promise<FileSystemDirectoryHandle>;
window.showなんたらで選択画面が出るのだろう
open
複数かひとつか
どうやらデフォルトは複数っぽいな
型レベルで長さが1なのを保証してるだけで、どちらにせよ配列
save
directory
FileSystemFileHandle
code:ts
class FileSystemFileHandle extends FileSystemHandle {
readonly kind: 'file';
getFile(): Promise<File>;
createWritable(options?: FileSystemCreateWritableOptions): Promise<FileSystemWritableFileStream>;
}
file system側の変更を検知することはできないっぽいがpollはできるはず
Returns a File representing the state on disk of the entry represented by handle. If the file on disk changes or is removed after this method is called, the returned File object will likely be no longer readable.
なるほど
なにか操作したいときにgetFileして読めるかどうかを確認すると良さそう
リロードしたあとgetFileとかしようとすると一回ポップアップで確認は挟まるものの、すぐに編集再開ができそう
filehandleを握ると書込みができるけど、filehandleを所得するためのポップアップがファイルアップロードと区別がつかないのはいいのかな?
単なるアップロードだと思ったのにファイルを消されてしまった、ということが可能なのでは